<template>
  <cml-module-item :title="titleText"
    :titleMore="titleMore"
    :hasMore='true'
    v-bind="$attrs"
    v-on="$listeners">
    <a-switch size="small"
      :disabled="rdisabled"
      :loading="rloading"
      :checked="isStart"
      @change="change($event, true)" />
    <template v-slot:detail>
      <morePanel />
    </template>
  </cml-module-item>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import CmlModuleItem from '../../cml-module-item'
import { Switch } from 'ant-design-vue'
import * as anov from 'anov-core'
import Color from '../../../../utils/sys-utils/color'
import morePanel from './morePanel'
import aiMediaCheck from '../../../util/aiMediaCheck'

export default {
  name: 'lightSensor',
  inheritAttrs: false,
  components: {
    ASwitch: Switch,
    CmlModuleItem,
    morePanel
  },
  model: {},
  props: {},
  data() {
    return {
      rloading: false, //是否启动中
      rdisabled: false,
      byUser: false,
      type: 'lightSensor'
    }
  },
  computed: {
    ...anov.lightSensorServer.mapState(['isStart', 'isHue', 'isBrightness']),
    ...anov.envServer.mapState(['videoStatus']),

    titleText() {
      return this.$t('cmlpanel.lightSensor')
    },
    titleMore() {
      return this.$t('cmlpanel.lightSensor')
    }
  },
  watch: {
    isStart(v, ov) {
      this.change(v)
    }
  },
  created() {},
  mounted() {
    //初始化状态
    this.isStart && this.change(this.isStart)
    this.filterDom = document.querySelector('#con')
    this.filterDom.style.transition = 'filter .2s'
    anov.lightSensorServer.addEventListener('start', this.onReady.bind(this))
    anov.lightSensorServer.addEventListener('stop', this.onStop.bind(this))
    anov.lightSensorServer.addEventListener('error', () => {
      aiMediaCheck.videoUnusable(this.$t('cmlspanel.lightSensor'))
      this.setVideoIsAvailable(false)
    })
    anov.lightSensorServer.addEventListener(
      'lightChange',
      this.onLightChange.bind(this)
    )
    anov.lightSensorServer.addEventListener('readyStart', () => {
      this.change(true)
    })
  },
  methods: {
    ...anov.envServer.mapMutations(['setVideoStatus','setVideoIsAvailable']),
    change(isStart, byUser) {
      // if(isStart == this.isStart) return
      this.byUser = byUser === true?byUser:this.byUser
        if((isStart == this.isStart)&& this.byUser) {
          this.byUser = false
          return
        }
        let params = {
          type: this.type,
          msg: this.$t('cmlpanel.lightSensor'),
          //确认开启弹框确认按钮回调
          okCallback: () => {},
          //确认开启弹框取消按钮回调
          cancelCallback: () => {
            this.rloading = false
          },
          //正常开启回调
          startCallback: () => {
            anov.lightSensorServer.start()
          }
        }
        if (isStart) {
          // 判断开启确认弹框 或 无效弹框 或 正常开启
          aiMediaCheck.getVideoStatus({...params})
        }else {
          anov.lightSensorServer.stop()
          this.rloading = false
        }
    },
    infoConfirm() {
      this.rvisible = false
    },
    onReady() {
      setTimeout(()=>{
        aiMediaCheck.videoUsable()
        this.rdisabled=false
        this.rloading=false
        this.podcast(true)
        this.bakFilter = this.filterDom.style.filter
      },10)
    },
    onLightChange(c) {
      let color = new Color(c.result)
      //解析 初始化 rgb
      color.toString('hsl')
      // 色值差
      let offset = 35
      let [r, g, b] = color.rgb
      let brightness = ((r + g + b) / (255 * 3)) * 3
      let useSaturate = brightness > 1
      //颜色感应开启，并且3通道色差值大于35
      let useHue =
        this.isHue &&
        (Math.abs(r - g) > offset ||
          Math.abs(r - b) > offset ||
          Math.abs(g - b) > offset)

      //当前默认主题色值 214
      let hue = useHue ? ' hue-rotate(' + (color.hsl[0] - 214) + 'deg)' : ''
      let bright = this.isBrightness ? ' brightness(' + brightness + ')' : ' '
      let saturate = useSaturate
        ? ' saturate(' + (+color.hsl[1] + 150) + '%)'
        : ''
      // dom.style.filter='hue-rotate('+(color.hsl[0]-207)+'deg) saturate('+(+color.hsl[1]+150)+'%)'
      this.filterDom.style.filter = bright + hue + saturate

      //console.log(brightness +' '+ color.toString('hsl')+' '+ color.toString('hex') +' '+color.toString('rgb'))
    },
    onStop() {
      this.filterDom.style.filter = this.bakFilter
    },
    onError(e) {
      this.rloading = false
      //摄像头不可用
      console.log(this.$t('cmlspanel.lightSensor'))

    },
    // 语音反馈
    podcast(isStart) {
      let msg = this.titleText + (isStart ? this.$t('cmlpanel.start') : this.$t('cmlpanel.stop'))
      anov.voiceFeedbackServer.speak(msg)
      app.msg({type: 'info', content: msg})
    }
  }
}
</script>

<style lang="scss" scoped></style>
